<template>
	<view>
		<div v-if="step=='one'">
			<div class="tab-list">
				<div class="tab-item" @click="changeTab('red')" :class="{'active':tab=='red'}">
					红事
				</div>
				<div class="tab-item" @click="changeTab('white')" :class="{'active':tab=='white'}">
					白事
				</div>
			</div>
			<u--form v-if="tab=='red'" labelPosition="left" labelWidth="180" :model="redinfo" :rules="redrules"
				ref="redform">
				<div class="section">
					<u-form-item label="申报人:" @click="showUsername=true" prop="userName" borderBottom>
						<u--input placeholder="请选择" disabled v-model="redinfo.userName" border="none"></u--input>
						<u-icon slot="right" color="#666666" name="arrow-right"></u-icon>
					</u-form-item>
					<u-form-item label="村(社区):" @click="showPicker" prop="village" borderBottom>
						<u--input placeholder="请选择村(社区)" disabled v-model="redinfo.village" border="none"></u--input>
						<u-icon slot="right" color="#666666" name="arrow-right"></u-icon>
					</u-form-item>
					<u-form-item label="详细地址:" prop="address" borderBottom>
						<u--input placeholder="请输入" v-model="redinfo.address" border="none"></u--input>
					</u-form-item>
				</div>
				<div class="section">
					<div class="title">男方</div>
					<u-form-item label="姓名:" prop="manName" borderBottom>
						<u--input placeholder="请输入" v-model="redinfo.manName" border="none"></u--input>
					</u-form-item>
					<u-form-item label="联系方式:" prop="manPhone" borderBottom>
						<u--input placeholder="请输入" type="number" v-model="redinfo.manPhone" border="none"></u--input>
					</u-form-item>
					<u-form-item label="政治面貌:" @click="showManPolitical = true;" prop="manPoliticalOutlook"
						borderBottom>
						<u--input disabled placeholder="请选择政治面貌" v-model="redinfo.manPoliticalOutlook" border="none">
						</u--input>
						<u-icon slot="right" color="#666666" name="arrow-right"></u-icon>
					</u-form-item>
					<u-form-item label="工作单位:" prop="manWork" borderBottom>
						<u--input placeholder="请输入" v-model="redinfo.manWork" border="none"></u--input>
					</u-form-item>
				</div>
				<div class="section">
					<div class="title">女方</div>
					<u-form-item label="姓名:" prop="womanName" borderBottom>
						<u--input placeholder="请输入" v-model="redinfo.womanName" border="none"></u--input>
					</u-form-item>
					<u-form-item label="联系方式:" prop="womanPhone" borderBottom>
						<u--input placeholder="请输入" type="number" v-model="redinfo.womanPhone" border="none"></u--input>
					</u-form-item>
					<u-form-item label="政治面貌:" @click="showWomanPolitical = true;" prop="womanPoliticalOutlook"
						borderBottom>
						<u--input disabled placeholder="请选择政治面貌" v-model="redinfo.womanPoliticalOutlook" border="none">
						</u--input>
						<u-icon slot="right" color="#666666" name="arrow-right"></u-icon>
					</u-form-item>
					<u-form-item label="工作单位:" prop="womanWork" borderBottom>
						<u--input placeholder="请输入" v-model="redinfo.womanWork" border="none"></u--input>
					</u-form-item>
				</div>
				<u-button class="submit-wrapper" @click="submitRed" text="下一步"></u-button>
			</u--form>
			<u--form v-if="tab=='white'" labelPosition="left" labelWidth="180" :model="whiteinfo" :rules="whiterules"
				ref="whiteform">
				<div class="section">
					<u-form-item label="村(社区):" @click="showPicker" prop="village" borderBottom>
						<u--input placeholder="请选择村(社区)" disabled v-model="whiteinfo.village" border="none"></u--input>
						<u-icon slot="right" color="#666666" name="arrow-right"></u-icon>
					</u-form-item>
					<u-form-item label="详细地址:" prop="address" borderBottom>
						<u--input placeholder="请输入详细地址" v-model="whiteinfo.address" border="none"></u--input>
					</u-form-item>
				</div>
				<div class="section">
					<div class="title">申报人</div>
					<u-form-item label="姓名:" prop="manName" borderBottom>
						<u--input placeholder="请输入" v-model="whiteinfo.manName" border="none"></u--input>
					</u-form-item>
					<u-form-item label="联系方式:" prop="manPhone" borderBottom>
						<u--input placeholder="请输入" type="number" v-model="whiteinfo.manPhone" border="none"></u--input>
					</u-form-item>
					<u-form-item label="性别:" @click="showSbrSex = true;" prop="manSex" borderBottom>
						<u--input disabled placeholder="请选择性别" v-model="whiteinfo.manSex" border="none">
						</u--input>
						<u-icon slot="right" color="#666666" name="arrow-right"></u-icon>
					</u-form-item>
					<u-form-item label="政治面貌:" @click="showManPolitical = true;" prop="manPoliticalOutlook"
						borderBottom>
						<u--input disabled placeholder="请选择政治面貌" v-model="whiteinfo.manPoliticalOutlook" border="none">
						</u--input>
						<u-icon slot="right" color="#666666" name="arrow-right"></u-icon>
					</u-form-item>
					<u-form-item label="工作单位:" prop="manWork" borderBottom>
						<u--input placeholder="请输入" v-model="whiteinfo.manWork" border="none"></u--input>
					</u-form-item>
					<u-form-item label="与逝者关系:" prop="deceasedRelation" borderBottom>
						<u--input placeholder="请输入关系" v-model="whiteinfo.deceasedRelation" border="none">
						</u--input>
					</u-form-item>
				</div>
				<div class="section">
					<div class="title">逝者</div>
					<u-form-item label="姓名:" prop="deceasedName" borderBottom>
						<u--input placeholder="请输入" v-model="whiteinfo.deceasedName" border="none"></u--input>
					</u-form-item>
					<u-form-item label="性别:" @click="showDeceasedSex = true;" prop="deceasedSex" borderBottom>
						<u--input disabled placeholder="请选择性别" v-model="whiteinfo.deceasedSex" border="none">
						</u--input>
						<u-icon slot="right" color="#666666" name="arrow-right"></u-icon>
					</u-form-item>
					<u-form-item label="年龄:" prop="deceasedAge" borderBottom>
						<u--input type="number" placeholder="请输入" v-model="whiteinfo.deceasedAge" border="none">
						</u--input>
					</u-form-item>
				</div>
				<u-button class="submit-wrapper" @click="submitWhite" text="下一步"></u-button>
			</u--form>
		</div>
		<div v-if="step=='two'">
			<u--form labelPosition="left" labelWidth="180" :model="commoninfo" :rules="commonrules" ref="commonform">
				<div class="section">
					<u-form-item label="办理时间:" @click="redshow = true;" prop="affairTime" borderBottom>
						<u--input disabled placeholder="请选择起止时间" v-model="commoninfo.affairTime" border="none">
						</u--input>
					</u-form-item>
					<u-form-item label="场地名称:" prop="affairPlaceName" borderBottom>
						<u--input placeholder="请输入" v-model="commoninfo.affairPlaceName" border="none"></u--input>
					</u-form-item>
					<u-form-item label="办理地点:" prop="affairPlace" borderBottom>
						<u--input placeholder="请输入" v-model="commoninfo.affairPlace" border="none"></u--input>
					</u-form-item>
					<u-form-item label="拟宴请人数:" prop="peopleNum" borderBottom>
						<u--input type='number' placeholder="请输入" v-model="commoninfo.peopleNum" border="none">
						</u--input>
					</u-form-item>
					<u-form-item v-if="tab==='red'" type='number' label="拟用车辆数:" prop="car" borderBottom>
						<u--input type='number' placeholder="请输入" v-model="commoninfo.car" border="none"></u--input>
					</u-form-item>
					<u-form-item v-if="tab==='red'" label="车辆来源:" @click="showRedCar= true;" prop="carSource"
						borderBottom>
						<u--input disabled placeholder="请选择车辆来源" v-model="commoninfo.carSource" border="none">
						</u--input>
						<u-icon slot="right" color="#666666" name="arrow-right"></u-icon>
					</u-form-item>
					<u-form-item v-if="tab==='white'" label="拟用殡仪车辆来源" @click="showWhiteCar= true;" prop="carSource"
						borderBottom>
						<u--input disabled placeholder="请选择拟用殡仪车辆来源" v-model="commoninfo.carSource" border="none">
						</u--input>
						<u-icon slot="right" color="#666666" name="arrow-right"></u-icon>
					</u-form-item>
					<u-form-item v-if="tab==='white'&&commoninfo.carSource=='私人'" type='number' label="车牌号:" prop="car"
						borderBottom>
						<u--input placeholder="请输入车牌号" v-model="commoninfo.car" border="none"></u--input>
					</u-form-item>
					<u-form-item label="备注:" prop="remark" borderBottom>
						<u--input placeholder="请输入" v-model="commoninfo.remark" border="none"></u--input>
					</u-form-item>
				</div>
				<div class="section">
					<div class="title">是否包含外地返回人员</div>
					<div class="radio-group">
						<div class="item" @click="commoninfo.outlander='1'">
							<div class="circle" :class="{'active':commoninfo.outlander=='1'}">√</div>
							<div class="text">有</div>
						</div>
						<div class="item" @click="commoninfo.outlander='0'">
							<div class="circle" :class="{'active':commoninfo.outlander=='0'}">√</div>
							<div class="text">无</div>
						</div>
					</div>
					<u-form-item v-if="commoninfo.outlander=='1'" label="外来人数:" prop="outlanderNum" borderBottom>
						<u--input type='number' placeholder="请输入" v-model="commoninfo.outlanderNum" border="none">
						</u--input>
					</u-form-item>
				</div>
				<div class="section">
					<div class="title">是否来自14天内有新增阳性感染者或中高风险地区 所在县（市、区，直辖市街道）</div>
					<div class="radio-group">
						<div class="item" @click="commoninfo.highRisk='1'">
							<div class="circle" :class="{'active':commoninfo.highRisk=='1'}">√</div>
							<div class="text">有</div>
						</div>
						<div class="item" @click="commoninfo.highRisk='0'">
							<div class="circle" :class="{'active':commoninfo.highRisk=='0'}">√</div>
							<div class="text">无</div>
						</div>
					</div>
					<u-form-item v-if="commoninfo.highRisk=='1'" label="高风险地区:" prop="highRiskPlace" borderBottom>
						<u--input placeholder="请输入" v-model="commoninfo.highRiskPlace" border="none"></u--input>
					</u-form-item>
				</div>
				<div class="section">
					<div class="title">是否邀请健康码为红、黄码或有发热、干咳、咽痛、 乏力、腹泻等身体异常症状者参加</div>
					<div class="radio-group">
						<div class="item" @click="commoninfo.abnormalMan='1'">
							<div class="circle" :class="{'active':commoninfo.abnormalMan=='1'}">√</div>
							<div class="text">有</div>
						</div>
						<div class="item" @click="commoninfo.abnormalMan='0'">
							<div class="circle" :class="{'active':commoninfo.abnormalMan=='0'}">√</div>
							<div class="text">无</div>
						</div>
					</div>
					<u-form-item v-if="commoninfo.abnormalMan=='1'" label="异常症状者:" prop="abnormalManName" borderBottom>
						<u--input placeholder="请输入姓名，多个请以“，”隔开" v-model="commoninfo.abnormalManName" border="none">
						</u--input>
					</u-form-item>
				</div>
				<u-button class="submit-wrapper" @click="submitCommon" text="提交"></u-button>
			</u--form>
		</div>
		<u-action-sheet :show="showManPolitical" :actions="actionsPolitical" title="请选择政治面貌"
			@close="showManPolitical = false" @select="politicalManSelect">
		</u-action-sheet>
		<u-action-sheet :show="showWomanPolitical" :actions="actionsPolitical" title="请选择政治面貌"
			@close="showWomanPolitical = false" @select="politicalWomanSelect">
		</u-action-sheet>
		<u-calendar :show="redshow" mode="range" @confirm="redconfirm"></u-calendar>
		<u-action-sheet :show="showSbrSex" :actions="actionsSex" title="请选择性别" @close="showSbrSex = false"
			@select="sbrSexSelect">
		</u-action-sheet>
		<!-- 红事车辆来源 -->
		<u-action-sheet :show="showRedCar" :actions="redCar" title="请选择车辆来源" @close="showRedCar = false"
			@select="redCarSelect">
		</u-action-sheet>
		<!-- 白事车辆来源 -->
		<u-action-sheet :show="showWhiteCar" :actions="whiteCar" title="请选择车辆来源" @close="showWhiteCar = false"
			@select="whiteCarSelect">
		</u-action-sheet>

		<u-action-sheet :show="showDeceasedSex" :actions="actionsSex" title="请选择性别" @close="showDeceasedSex = false"
			@select="deceasedSexSelect">
		</u-action-sheet>
		<u-action-sheet :show="showUsername" :actions="username" title="请选择" @close="showUsername = false"
			@select="usernameSelect">
		</u-action-sheet>
		<m-city :provinceData="list" headTitle="区域选择" ref="cityPicker" @funcValue="getpickerParentValue" pickerSize="2">
		</m-city>
	</view>
</template>
<script>
	import gkcity from "./m-city.vue";
	import {
		AddRedaffair,
		AddWhiteaffair
	} from "@/utils/api.js"
	export default {
		components: {
			"m-city": gkcity
		},
		data() {
			return {
				list: [{
					id: "",
					localName: "请选择",
					children: [],
				}],
				step: 'one',
				tab: 'red',
				showUsername: false,
				showManPolitical: false,
				showWomanPolitical: false,
				redshow: false,
				showSbrSex: false,
				showDeceasedSex: false,
				showRedCar: false,
				showWhiteCar: false,
				actionsSex: [{
					name: '男'
				}, {
					name: '女'
				}],
				username: [{
					name: '男方'
				}, {
					name: '女方'
				}],
				redCar: [{
					name: '婚庆公司'
				}, {
					name: '自行筹备'
				}],
				whiteCar: [{
					name: '殡仪公司'
				}, {
					name: '私人'
				}],
				actionsPolitical: [{
					name: '群众'
				}, {
					name: '中共党员'
				}, {
					name: '其他'
				}],
				redinfo: {
					userName: '男方',
					village: '',
					address: '',
					manName: '',
					manPhone: '',
					manPoliticalOutlook: '群众',
					manWork: '',
					womanName: '',
					womanPhone: '',
					womanPoliticalOutlook: '群众',
					womanWork: '',

				},
				whiteinfo: {
					village: '',
					address: '',
					manName: '',
					manPhone: '',
					manSex: '男',
					manPoliticalOutlook: '群众',
					manWork: '',
					deceasedRelation: '',
					deceasedName: '',
					deceasedSex: '男',
					deceasedAge: '',
					highRiskPlace: '',
					abnormalMan: '0',
					abnormalManName: '',
				},
				commoninfo: {
					affairTime: '',
					affairPlaceName: '',
					affairPlace: '',
					peopleNum: '',
					car: '',
					carSource: '婚庆公司',
					remark: '',
					outlander: '0',
					outlanderNum: '',
					highRisk: '0',
					highRiskPlace: '',
					abnormalMan: '0',
					abnormalManName: '',
				},
				actions: [{
					name: '男',
				}, {
					name: '女',
				}, {
					name: '保密',
				}, ],
				redrules: {
					'userName': {
						type: 'string',
						required: true,
						message: '请填写申报人',
						trigger: ['blur', 'change']
					},
					'village': {
						type: 'string',
						required: true,
						message: '请选择村(社区)',
						trigger: ['blur', 'change']
					},
					'address': {
						type: 'string',
						required: true,
						message: '请输入详细地址',
						trigger: ['blur', 'change']
					},
					'manName': {
						type: 'string',
						max: 20,
						required: true,
						message: '请填写男方姓名或格式不正确',
						trigger: ['blur', 'change']
					},
					'manPhone': {
						type: 'string',
						required: true,
						max: 20,
						message: '请填写男方手机号或格式不正确',
						trigger: ['blur', 'change']
					},
					'manWork': {
						type: 'string',
						required: true,
						max: 30,
						message: '请填写男方工作单位或格式不正确',
						trigger: ['blur', 'change']
					},
					'womanName': {
						type: 'string',
						required: true,
						max: 20,
						message: '请填写女方姓名或格式不正确',
						trigger: ['blur', 'change']
					},
					'womanPhone': {
						type: 'string',
						required: true,
						max: 20,
						message: '请填写女方手机号或格式不正确',
						trigger: ['blur', 'change']
					},
					'womanWork': {
						type: 'string',
						required: true,
						max: 30,
						message: '请填写女方工作单位或格式不正确',
						trigger: ['blur', 'change']
					}
				},
				whiterules: {
					'village': {
						type: 'string',
						required: true,
						message: '请选择村(社区)',
						trigger: ['blur', 'change']
					},
					'address': {
						type: 'string',
						required: true,
						message: '请输入详细地址',
						trigger: ['blur', 'change']
					},
					'manName': {
						type: 'string',
						max: 20,
						required: true,
						message: '请填写申报人姓名或格式不正确',
						trigger: ['blur', 'change']
					},
					'manPhone': {
						type: 'string',
						required: true,
						max: 20,
						message: '请填写申报人手机号或格式不正确',
						trigger: ['blur', 'change']
					},
					'manWork': {
						type: 'string',
						required: true,
						max: 30,
						message: '请填写申报人工作单位或格式不正确',
						trigger: ['blur', 'change']
					},
					'deceasedName': {
						type: 'string',
						required: true,
						max: 20,
						message: '请填写逝者姓名或格式不正确',
						trigger: ['blur', 'change']
					},
					'deceasedAge': {
						type: 'string',
						required: true,
						max: 20,
						message: '请填写逝者年龄或格式不正确',
						trigger: ['blur', 'change']
					},
				},
				commonrules: {
					'affairTime': {
						type: 'string',
						required: true,
						message: '请选择起止时间',
						trigger: ['blur', 'change']
					},
					'affairPlaceName': {
						type: 'string',
						required: true,
						max: 30,
						message: '请填写场地名称或格式不正确',
						trigger: ['blur', 'change']
					},
					'affairPlace': {
						type: 'string',
						max: 30,
						required: true,
						message: '请填写办理地点或格式不正确',
						trigger: ['blur', 'change']
					},
					'peopleNum': {
						type: 'string',
						max: 100,
						required: true,
						message: '请填写宴请人数',
						trigger: ['blur', 'change']
					},
					'car': {
						type: 'string',
						max: 100,
						validator: (rule, value, callback) => {
							if (this.tab === 'white') {
								if (this.commoninfo.carSource == '私人') {
									if (this.commoninfo.car == '') {
										return false
									}
								}
								return true
							} else {
								if (this.commoninfo.car == '') {
									return false
								}
								return true
							}
						},
						message: '不能为空或者格式错误',
						trigger: ['blur', 'change']
					},
					'carSource': {
						type: 'string',
						max: 30,
						required: true,
						message: '请选择车辆来源',
						trigger: ['blur', 'change']
					},
					'outlanderNum': {
						validator: (rule, value, callback) => {
							if (this.commoninfo.outlander === '1') {
								if (this.commoninfo.outlanderNum === '') {
									return false
								} else {
									return true
								}
							} else {
								return true
							}
						},
						message: '请输入外来人数',
						trigger: ['change', 'blur'],
					},
					'highRiskPlace': {
						validator: (rule, value, callback) => {
							if (this.commoninfo.highRisk === '1') {
								if (this.commoninfo.highRiskPlace === '') {
									return false
								} else {
									return true
								}
							} else {
								return true
							}
						},
						message: '请输入风险地区名',
						trigger: ['change', 'blur'],
					},
					'abnormalManName': {
						validator: (rule, value, callback) => {
							if (this.commoninfo.abnormalMan === '1') {
								if (this.commoninfo.abnormalManName === '') {
									return false
								} else {
									return true
								}
							} else {
								return true
							}
						},
						message: '请输入异常症状者姓名',
						trigger: ['change', 'blur'],
					}
				},
				radio: '',
				switchVal: false
			};
		},
		methods: {
			changeTab(tab) {
				this.tab = tab
				if (tab == 'red') {
					this.commoninfo.carSource = '婚庆公司'
					this.$refs.whiteform.clearValidate()
					this.$nextTick(() => {
						this.$refs.redform.clearValidate()
						setTimeout(() => {
							this.$refs.redform.clearValidate()
						})
					})
				} else {
					this.commoninfo.carSource = '殡仪公司'
					this.$refs.redform.clearValidate()
					this.$nextTick(() => {
						setTimeout(() => {
							this.$refs.whiteform.clearValidate()
						})
					})
				}
			},
			submitRed() {
				this.$refs.redform.validate().then(res => {
					console.log('校验通过')
					this.step = 'two'
					this.$nextTick(() => {
						setTimeout(() => {
							this.$refs.commonform.clearValidate()
						})
					})
				}).catch(errors => {
					console.log('校验失败')
				})
			},
			submitWhite() {
				this.$refs.whiteform.validate().then(res => {
					console.log('校验通过')
					this.step = 'two'
					this.$nextTick(() => {
						setTimeout(() => {
							this.$refs.commonform.clearValidate()
						})
					})
				}).catch(errors => {
					console.log('校验失败')
				})
			},
			submitCommon() {
				if (this.tab == 'red') {
					this.$refs.commonform.validate().then(res => {
						AddRedaffair({
							...this.redinfo,
							...this.commoninfo
						}).then((res) => {
							console.log(res)
							if (res.data.code === 200) {
								uni.setStorageSync('type', 'red')
								uni.setStorageSync('info', {
									...this.redinfo,
									...this.commoninfo
								})
								uni.redirectTo({
									url: "/pages/success/success"
								})
							} else {
								uni.showToast({
									icon: "none",
									text: res.data.message
								})
							}
						})
					}).catch(errors => {
						console.log('校验失败')
					})
				}
				if (this.tab == 'white') {
					this.$refs.commonform.validate().then(res => {
						AddWhiteaffair({
							...this.whiteinfo,
							...this.commoninfo
						}).then((res) => {
							console.log(res)
							if (res.data.code === 200) {
								uni.setStorageSync('type', 'white')
								uni.setStorageSync('info', {
									...this.whiteinfo,
									...this.commoninfo
								})
								uni.redirectTo({
									url: "/pages/success/success"
								})
							} else {
								uni.showToast({
									icon: "none",
									text: res.data.message
								})
							}
						})
					}).catch(errors => {
						console.log('校验失败')
					})
				}
			},
			redconfirm(e) {
				this.redshow = false
				this.commoninfo.affairTime = e[0] + '至' + e[e.length - 1]
				this.$refs.commonform.validateField('affairTime')
			},
			politicalManSelect(e) {
				if (this.tab === 'red') {
					this.redinfo.manPoliticalOutlook = e.name
					this.$refs.redform.validateField('manPoliticalOutlook')
				} else {
					this.whiteinfo.manPoliticalOutlook = e.name
					this.$refs.whiteform.validateField('manPoliticalOutlook')
				}

			},
			politicalWomanSelect(e) {
				this.redinfo.womanPoliticalOutlook = e.name
				this.$refs.redform.validateField('womanPoliticalOutlook')
			},
			sbrSexSelect(e) {
				this.whiteinfo.manSex = e.name
			},
			redCarSelect(e) {
				this.commoninfo.carSource = e.name
			},
			whiteCarSelect(e) {
				this.commoninfo.carSource = e.name
				this.commoninfo.car = ''
			},
			deceasedSexSelect(e) {
				this.whiteinfo.deceasedSex = e.name
			},
			usernameSelect(e) {
				this.redinfo.userName = e.name
			},
			getpickerParentValue(e) {
				// console.log(e)
				let village = [];
				let deptId = []
				let name = "";
				e.forEach((item, index) => {
					if (item.id) {
						if (this.tab == 'red') {
							// console.log(item)
							village.push(item.localName);
							deptId.push(item.id)
							this.redinfo.village = village.join(',');
							this.redinfo.deptId = deptId.slice(-1).join(',');
						} else {
							village.push(item.localName);
							deptId.push(item.id)
							this.whiteinfo.village = village.join(',');
							this.whiteinfo.deptId = deptId.slice(-1).join(',');
						}
					}
				});
				// console.log(this.redinfo.village)
			},
			showPicker() {
				this.$refs.cityPicker.show();
			},
		},
	};
</script>
<style lang="scss">
	page {
		height: 100%;
		background-color: #f4f4f4;
	}

	/deep/ .u-input {
		background-color: transparent !important;
	}

	.tab-list {
		padding: 24upx 0;
		display: flex;
		justify-content: space-around;

		.tab-item {
			height: 60rpx;
			line-height: 60rpx;
			border-bottom: 6rpx solid #f4f4f4;

			&.active {
				color: #2952FC;
				border-bottom: 6rpx solid #2952FC;
			}
		}
	}

	.section {
		background-color: #ffffff;
		margin-bottom: 24rpx;
		padding: 24rpx;

		.title {
			padding: 24upx 0;
			font-size: 30rpx;
			font-weight: bold;
			border-bottom: 2rpx solid rgb(214, 215, 217);
		}
	}

	.submit-wrapper {
		margin: 0 auto;
		width: 700rpx;
		background-color: #006DF4;
		color: #ffffff;
	}

	.radio-group {
		padding: 24upx;

		.item {
			margin: 12upx 0;
			display: flex;
			align-items: center;

			.circle {
				width: 24rpx;
				height: 24rpx;
				line-height: 24rpx;
				text-align: center;
				border-radius: 24rpx;
				border: 2rpx solid #aaaaaa;
				margin-right: 16rpx;
				font-size: 28rpx;
				color: #ffffff;

				&.active {
					background-color: #006DF4;
					border-color: #006DF4;
				}
			}
		}
	}
</style>
